<template>
  <view class="mask" catchtouchmove="true">
    <view class="top">
      <view class="back" @click="back">
        <img class="back-img" src="@/static/images/left.png" alt="">
        <span class="back-text" >忘记密码</span>
      </view>
    <view class="bottom">
      <view class="bottom-top">
        <span class="top-text">输入验证码</span>
        <span class="bottom-text">验证码发送至137 xxx xxx</span>
      </view>
      <view class="bottom-mid">
        <input class="margin one" focus="true" type="number" maxlength="1">
        <input class="margin two" type="number" maxlength="1">
        <input class="margin three" type="number" maxlength="1">
        <input class="margin four" type="number" maxlength="1">
      </view>
      <view class="bottom-button">
        <span class="button"> 58秒 </span>
      </view>
    </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
const back = () => {
  uni.navigateBack({
    delta: 1
  });
}
</script>

<style lang="scss" scoped>
.mask {
  .top {
    
    .back {
      display: flex;
      // flex-direction: row;
      top: 53px;
      width: 750rpx;
      height: 140px;
      background: #f2bb16;
      
     .back-img {
      margin-top: 80px;
      margin-left: 30px;
      width: 17px;
      height: 17px;
     }

      .back-text {
        width: 56px;
        height: 17px;
        margin-top: 80px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        text-align: CENTER;
        color: #ffffff;
        line-height: 16px;
      }

    }
  }

  .bottom {
    position: absolute;
    top: 110px;
    width: 750rpx;
    height: 934rpx;
    background: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;

    .bottom-top {
      display: flex;
      flex-direction: column;
      margin-top: 42px;
      margin-left: 31px;

      .top-text {
        width: 132px;
        height: 43px;

        // background: #000000;
        font-size: 24px;
        // font-family: Inter, Inter-700;
        font-weight: 700;
        text-align: CENTER;
        color: #000000;
        line-height: 28px;
      }

      .bottom-text {
        width: 216px;
        height: 17px;
        margin-left: 7px;
        // background: #949090;
        font-size: 14px;
        // font-family: Inter, Inter-400;
        font-weight: 400;
        // text-align: CENTER;
        color: #949090;
        line-height: 16px;
      }
    }

    .bottom-mid {
      display: flex;
      width: 280px;
      margin-top: 42px;
      margin-left: 38px;

      .margin {
        width: 48px;
        height: 20px;
        border-bottom: 2px solid #c0bfbf;
        margin-right: 26px;
      }

    }


  .bottom-button {
    margin-top: 30px;
    margin-left: 275px;
    width: 71px;
    height: 30px;
    opacity: 0.59;
    background: #f2bb16;
    border-radius: 20px;

    .button {
      display: flex;
      width: 35px;
      height: 11px;
      opacity: 0.59;
      font-size: 15px;
      font-weight: 400;
      text-align: CENTER;
      color: #ffffff;
      line-height: 28px;
      margin-left: 20px;
    }

  }
  }
}
</style>